<template lang="pug">
  .clearfix
    Modal(
      width="1000"
      v-model="isShowAuditDetailModal"
      title="审核详情"
      class-name="vertical-center-modal"
    )
      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true" ref="demoTable")
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              :current="tableComone.pageIndex"
              :page-size="tableComone.pageSize"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
      template(slot="footer")
        Button(@click="cancel") 关闭
</template>

<script>
import { Common } from '@/utils/common.js'
import { BillApi } from '@/api/Bill.api.js'
import moment from 'moment'

export default {
  name: '',

  props: {
  },

  computed: {
    setThead () {
      return Common.getTableColumns(this.thead, this.tableColumns)
    },
  },

  data () {
    return {
      parentRow: null,
      isShowAuditDetailModal: false,
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
      },
      tableData: [],
      thead: ['type', 'operate', 'operateDate', 'remark'],
      tableColumns: {
        type: {
          title: '操作',
          align: 'center',
          key: 'type',
          render: (h, params) => {
          let row = params.row
          let arr = [{label: '撤回', value: 0}, {label: '核对', value: 1}]
          let text = arr.find(item=>{return item.value == row.type}).label
          return h('span', text)
        }
        },
        // statusName: {
        //   title: '操作结果',
        //   align: 'center',
        //   key: 'statusName'
        // },
        operate: {
          title: '操作人',
          align: 'center',
          key: 'operate'
        },
        operateDate: {
          title: '操作时间',
          align: 'center',
          key: 'operateDate',
          render: (h, params) => {
            let row = params.row
            let times = row.operateDate ? moment(row.operateDate).format('YYYY-MM-DD HH:mm') : ''
            return h('span', times)
          }
        },
        remark: {
          title: '退回原因',
          align: 'center',
          key: 'remark'
        },
      }
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowAuditDetailModal = false
    },
  
    show (row) {
      this.tableData = []
      this.tableComone.pageIndex = 1
      this.parentRow = row
      this.isShowAuditDetailModal = true
      this.query()
    },

    // 分页页码变动
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    
    // 分页页码变动
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    query () {
      var params = {
        customerId: this.$route.query.companyId,
        year: this.parentRow.periodYear,
        month: this.parentRow.periodMonth,
        pageIndex: this.tableComone.pageIndex,
        pageSize: this.tableComone.pageSize
      };
      BillApi.getBillLog(params).then(res => {
        console.log("列表res: ", res);
        if (res.status === 200 && res.data.success) {
          this.tableData = res.data.data;
          this.tableComone.totalRows = res.data.totalRows
        } else {
          this.tableData = [];
        }
        this.loading = false;
      });
    },
  }
}
</script>

<style lang="less" scope>
.ApplyInvoice{

}
</style>
